<template>
	<!-- 非她莫属-搜索结果 -->
	<view>
		<u-navbar :back-text="title ? '非“她”莫属' : '匹配中'" :back-text-style="textStyle" back-icon-color="#000000" style="font-weight: bold;font-family: PingFang SC;"></u-navbar>
		<!-- <u-navbar back-icon-color="#000000" :title="title ? '非“她”莫属' : '匹配中'" title-color="#3F3F3F" :border-bottom="false"
		 :title-bold="true" :background="background"></u-navbar> -->
		<view v-if="title == false">
			<view>
				<view style="text-align: center;">
					<image src="../../../../static/img/1-19.png" style="margin-top: 94rpx;width: 268rpx;height: 268rpx;"></image>
				</view>
				<view style="text-align: center;">
					<image :src="imageUrl" style="margin-top: 30rpx;width: 166rpx;height: 48rpx;"></image>
				</view>
				<view class="typeface1" style="text-align: center;margin-top: 34rpx;">匹配中...</view>
			</view>
		</view>
		<view v-if="title">
			<view style="margin: 10rpx 28rpx 0rpx 34rpx;">
				<u-row>
					<u-col span="9" style="height: 58rpx;">
						<view style="display: flex;flex-direction: row;">
							<view class="typeface2" style="margin-top: 10rpx;">已为您匹配到符合您需求的员工</view>
							<view class="typeface3" style="margin-top: 10rpx;">{{ total }}</view>
							<view class="typeface2" style="margin-top: 10rpx;">名</view>
						</view>
					</u-col>
					<u-col span="3" text-align="right" style="height: 58rpx;">
						<view class="updateButtom" @click="updateDemand">修改需求</view>
					</u-col>
				</u-row>
			</view>
			<mescroll-body top="0" :down="downOption" :up="upOption" ref="mescrollRef" @init="mescrollInit" @down="downCallback">
				<!-- 非她莫属列表-->
				<view>
					<view class="tables" v-for="(item, index) in employeesList" :key="index" @click="jumpToauntCandidate(item)" style="border-bottom: 4rpx solid #F5F5F5;">
						<view style="padding: 12rpx 14rpx;display: flex;">
							<image :src="item.entPortrait" mode="" style="width: 32rpx;height: 41rpx;"></image>
							<view class="typeface4">{{ item.entName }}</view>
						</view>
						<view style="margin: 18rpx 22rpx 10rpx 6rpx;">
							<view style="display: flex;width: 100%;">
								<image :src="item.portrait" mode="aspectFill" style="width: 164rpx;height: 247rpx;border-radius: 5rpx;"></image>
								<view style="width: 78%;">
									<view style="display: flex;align-items: center;justify-content: space-between;">
										<view>
											<view style="display: flex;align-items: center;padding-left: 30rpx;">
												<view class="typeface5">{{ item.name }}</view>
												<text class="typeface7">{{ item.score }}分</text>
											</view>
											<view class="typeface8" style="margin-top: 18rpx;padding-left: 30rpx;">
												<text>{{ item.age }}岁</text>
												<text style="margin-left: 32rpx;">{{ item.nativePlace }}</text>
												<text style="margin-left: 32rpx;">服务{{ item.workYear<=0 ? 0 : item.workYear }}年</text>
											</view>
										</view>
										<view style="text-align: center;">
											<image src="../../../../static/icon/pipei.png" mode="" style="width: 51rpx;height: 45rpx;"></image>
											<view style="font-size: 30rpx;color: #FE7A00;">{{ item.matchScore }}%</view>
										</view>
									</view>
									<view style="margin-top: 8rpx;display: flex; flex-wrap:wrap;height: 108rpx;padding-left: 30rpx;">
										<view class="label" v-for="(items, indexs) in item.skills" :key="indexs" v-if="indexs < 2">{{ items }}</view>
									</view>
									<view class="typeface9" style="text-align: right;margin-top: 10rpx;margin-bottom: 20rpx;padding-left: 30rpx;">
										{{ item.univalence }}{{ item.univalenceUnit }}
									</view>
								</view>
								<view style="border-bottom: 2rpx solid #F1F1F1;margin-top: 18rpx;"></view>
							</view>
						</view>
					</view>

					<view style="margin-top: 50rpx;">
						<u-divider color="#DEDEDE" half-width="120" border-color="#DEDEDE">{{ prompt }}</u-divider>
					</view>
					<!-- {{isRecommend}} -->
				</view>

				<view v-if="isRecommend">
					<view style="text-align: center;margin-top: 50rpx;">
						<image src="../../../../static/img/1-20.png" style="width: 51rpx;height: 6rpx;vertical-align: middle;"></image>
						<text class="typeface10" style="margin-left:10rpx;">为您推荐</text>
						<image src="../../../../static/img/1-21.png" style="width: 51rpx;height: 6rpx;vertical-align: middle;margin-left:10rpx;"></image>
					</view>

					<view class="tables" @click="toJump(items)" v-for="(items, indexs) in employeesLists" :key="indexs" style="border-bottom: 4rpx solid #F5F5F5;">
						<view style="padding: 12rpx 14rpx;display: flex;">
							<image :src="items.entPortrait" mode="" style="width: 32rpx;height: 41rpx;"></image>
							<view class="typeface4">{{ items.entName }}</view>
						</view>

						<view style="margin: 18rpx 22rpx 10rpx 6rpx;">
							<view style="display: flex;width: 100%;">
								<image :src="items.portrait" style="width: 140rpx;height: 222rpx;border-radius: 5rpx;"></image>
								<view style="width: 78%;">
									<view style="display: flex;align-items: center;justify-content: space-between;">
										<view>
											<view style="display: flex;align-items: center;padding-left: 30rpx;">
												<view class="typeface5">{{ items.name }}</view>
												<text class="typeface7">{{ items.score }}分</text>
											</view>
											<view class="typeface8" style="margin-top: 18rpx;padding-left: 30rpx;">
												<text>{{ items.age }}岁</text>
												<text style="margin-left: 32rpx;">{{ items.nativePlace }}</text>
												<text style="margin-left: 32rpx;">服务{{ items.workYear<=0 ? 0 : items.workYear }}年</text>
												<!-- <text style="margin-left: 32rpx;">{{item.education|degreeScreening}}学历</text> -->
											</view>
										</view>
										<view style="text-align: center;">
											<image src="../../../../static/icon/pipei.png" mode="" style="width: 51rpx;height: 45rpx;"></image>
											<view style="font-size: 30rpx;color: #FE7A00;">{{ items.matchScore }}%</view>
										</view>
									</view>
									<view style="margin-top: 8rpx;display: flex; flex-wrap:wrap;height: 108rpx;padding-left: 30rpx;">
										<view class="label" v-for="(ite, inde) in items.skills" :key="inde" v-if="inde < 2">{{ ite }}</view>
									</view>
									<view class="typeface9" style="text-align: right;margin-top: 10rpx;margin-bottom: 20rpx;padding-left: 30rpx;">
										{{ items.univalence }}{{ items.univalenceUnit }}
									</view>
								</view>
							</view>
						</view>
					</view>
					<view style="margin-top: 50rpx;">
						<u-divider color="#DEDEDE" half-width="120" border-color="#DEDEDE">{{ prompts }}</u-divider>
					</view>
				</view>
			</mescroll-body>
		</view>

		<!-- <movable-area class="movableArea" @click="jumpToherSchedule">
			<movable-view class="movableView" direction="all" x="600rpx" y="800rpx">
				<image src="../../../../static/icon/houxuan.png" mode="widthFix"></image>
				<text>{{candidateNumber}}</text>
			</movable-view>
		</movable-area> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				background: {
					backgroundColor: '#ffffff'
				},
				title: true,
				imageUrl: '../../../../static/img/1-18.png',
				imageList: ['../../../../static/img/1-18.png', '../../../../static/img/1-17.png', '../../../../static/img/1-16.png',
					'../../../../static/img/1-15.png'
				],
				imageId: 0,
				count: 5,

				pageSize: 10,
				page: 1,
				pageSizes: 10,
				pages: 1,
				prompt: '没有更多了',
				employeesList: [], //搜搜列表
				prompts: '没有更多了',
				employeesLists: [], //推荐列表
				screeningData: {},
				total: 0,

				candidateNumber: null, //候选人数
				isRecommend: false, //是否显示推荐

				// 下拉刷新配置
				downOption: {
					use: false,
					auto: true,
					offset: 40
				},
				upOption: {
					use: true,
					auto: false
				},
				mescroll: null
			};
		},
		// filters:{
		// 	degreeScreening(data){
		// 		switch(data){
		// 			case '1':
		// 				return '小学';
		// 			case '2':
		// 				return '初中';
		// 			case '3':
		// 				return '高中';
		// 			case '4':
		// 				return '大专';
		// 			case '5':
		// 				return '本科';
		// 			case '6':
		// 				return '研究生';
		// 			default:
		// 				return;
		// 		}
		// 	}
		// },
		onReachBottom() {
			// if (!this.isShow) {
			this.page += 1;
			this.getSearchData();
			this.pages += 1;
			this.getRecommend();
			// }
		},
		onLoad(option) {
			this.screeningData = JSON.parse(option.screeningData);
			setInterval(() => {
				this.updateImage();
			}, 700);
			this.title = false;
			this.page = 1;
			this.employeesList = [];
			// this.prompt = '加载中....';
			//搜索查询
			this.getSearchData();
			// 推荐
			this.pages = 1;
			this.employeesLists = [];
			// this.prompts = '加载中....';
			this.getRecommend();
			// this.getcandidateNumber();
		},
		methods: {
			mescrollInit(mescroll) {
				this.mescroll = mescroll;
			},
			// 下拉刷新回调函数
			downCallback() {
				console.log('下拉刷新');
				setTimeout(() => {
					this.mescroll.endSuccess();
				}, 2000);
			},
			//获取候选人数
			// getcandidateNumber: function() {
			// 	let opts = {
			// 		way: true, //true JSON请求；false 表单请求
			// 		method: 'post',
			// 		url: 'employee/chooseNum',
			// 	};
			// 	let data = {};
			// 	this.http.httpTokenRequest(opts, data).then(res => {
			// 		if (res.code == "200") {
			// 			this.candidateNumber = res.data;
			// 		} else {
			// 			this.$refs.uToast.show({
			// 				title: res.message,
			// 				type: 'error'
			// 			})
			// 		}
			// 	});
			// },
			//修改候选状态
			updateCandidate: function(item, index) {
				//true:候选中   false:未候选
				if (item.choose) {
					let opts = {
						way: true, //true JSON请求；false 表单请求
						method: 'post',
						url: 'user-candidate/list/cancel'
					};
					let data = {
						employeeId: item.employeeId,
						businessId: this.redirectId,
						addType: 2
					};
					this.http.httpTokenRequest(opts, data).then(res => {
						if (res.code == '200') {
							// this.getcandidateNumber();
							this.employeesList[index].choose = false;
							this.counts += 1;
						} else {
							this.$refs.uToast.show({
								title: res.message,
								type: 'error'
							});
						}
					});
				} else {
					let opts = {
						way: true, //true JSON请求；false 表单请求
						method: 'post',
						url: 'user-candidate/add'
					};
					let data = {
						employeeId: item.employeeId,
						businessId: this.redirectId,
						addType: 2
					};
					this.http.httpTokenRequest(opts, data).then(res => {
						if (res.code == '200') {
							// this.getcandidateNumber();
							this.employeesList[index].choose = true;
							this.counts += 1;
						} else {
							this.$refs.uToast.show({
								title: res.message,
								type: 'error'
							});
						}
					});
				}
			},
			getSearchData: function() {
				let opts = {
					way: true, //true JSON请求；false 表单请求
					method: 'post',
					url: 'employee/search'
				};
				let data = {
					page: this.page,
					pageSize: this.pageSize,
					businessId: this.screeningData.businessId, //服务id
					residence: this.screeningData.residence, //是否住家
					minChooseSalary: this.screeningData.minChooseSalary, //最小薪水
					maxChooseSalary: this.screeningData.maxChooseSalary, //最大薪水
					minChooseAge: this.screeningData.minChooseAge, //最小年龄
					maxChooseAge: this.screeningData.maxChooseAge, //最大年龄
					workYear: this.screeningData.workYear, //工作时长
					education: this.screeningData.education, //学历 0不限 1小学；2初中；3高中；4大专；5本科；6研究生及以上
					mapAddress: this.screeningData.mapAddress, //地图点选地址
					language: this.screeningData.language.join(','), //语言 1普通话；2英语
					gender: this.screeningData.gender, //性别 1男；2女
					skillIds: this.screeningData.skillIds //高级筛选
				};
				this.http.httpTokenRequest(opts, data).then(res => {
					//打印请求返回的数据
					this.title = true;
					if (res.code == '200') {
						this.total = res.data.total;
						if (res.data.records.length > 0 || this.page != 1) {
							this.isRecommend = false;
							if (res.data.current * res.data.size < res.data.total) {
								for (const key in res.data.records) {
									this.employeesList.push(res.data.records[key]);
								}
								this.prompt = '加载中....';
							} else {
								for (const key in res.data.records) {
									this.employeesList.push(res.data.records[key]);
								}
								this.prompt = '没有更多了';
								this.isRecommend = true;
							}
						} else {
							this.isRecommend = true;
						}
					} else {
						this.$refs.uToast.show({
							title: res.message,
							type: 'error'
						});
					}
				});
			},
			getRecommend: function() {
				let opts = {
					way: true, //true JSON请求；false 表单请求
					method: 'post',
					url: 'employee/recommend'
				};
				let data = {
					page: this.pages,
					pageSize: this.pageSizes,
					businessId: this.screeningData.businessId, //服务id
					residence: this.screeningData.residence, //是否住家
					minChooseSalary: this.screeningData.minChooseSalary, //最小薪水
					maxChooseSalary: this.screeningData.maxChooseSalary, //最大薪水
					minChooseAge: this.screeningData.minChooseAge, //最小年龄
					maxChooseAge: this.screeningData.maxChooseAge, //最大年龄
					workYear: this.screeningData.workYear, //工作时长
					education: this.screeningData.education, //学历 0不限 1小学；2初中；3高中；4大专；5本科；6研究生及以上
					mapAddress: this.screeningData.mapAddress, //地图点选地址
					language: this.screeningData.language.join(','), //语言 1普通话；2英语
					gender: this.screeningData.gender, //性别 1男；2女
					skillIds: this.screeningData.skillIds //高级筛选
				};
				this.http.httpTokenRequest(opts, data).then(res => {
					//打印请求返回的数据
					this.title = true;
					if (res.code == '200') {
						// this.total = res.data.total;
						if (res.data.records.length > 0 || this.pages != 1) {
							// this.isRecommend = false;
							if (res.data.current * res.data.size < res.data.total) {
								for (const key in res.data.records) {
									this.employeesLists.push(res.data.records[key]);
								}
								this.prompts = '加载中....';
							} else {
								for (const key in res.data.records) {
									this.employeesLists.push(res.data.records[key]);
								}
								this.prompts = '没有更多了';
								// this.isRecommend = true;
							}
						} else {
							// this.isRecommend = true;
						}
					} else {
						this.$refs.uToast.show({
							title: res.message,
							type: 'error'
						});
					}
				});
			},
			updateImage: function() {
				this.imageId += 1;
				this.imageUrl = this.imageList[this.imageId];
				if (this.imageId == 3) {
					this.imageId = -1;
				}
			},
			jumpToherSchedule: function() {
				//候选阿姨
				uni.navigateTo({
					url: '../auntCandidate/auntCandidate'
				});
			},
			jumpToauntCandidate: function(item) {
				// 他的简历
				uni.navigateTo({
					url: '../hisResume/hisResume?employeeId=' + item.employeeId + '&redirectId=' + this.screeningData.businessId +
						'&addType=2'+'&type=1'
				});
			},
			toJump: function(item) {
				uni.navigateTo({
					url: '../hisResume/hisResume?employeeId=' + item.employeeId + '&redirectId=' + this.screeningData.businessId +
						'&addType=2'+'&type=1'
				});
			},
			//返回上一页
			updateDemand: function() {
				uni.navigateBack({
					delta: 1
				});
			}
		}
	};
</script>

<style lang="less">
	.typeface1 {
		font-size: 38rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #000000;
		opacity: 1;
	}

	.typeface2 {
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #979797;
		opacity: 1;
	}

	.typeface3 {
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #f29423;
		opacity: 1;
	}

	.updateButtom {
		width: 152rpx;
		height: 58rpx;
		background-color: #fca800;
		border-radius: 30rpx;
		opacity: 1;
		text-align: center;
		line-height: 58rpx;
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #ffffff;
		opacity: 1;
	}

	.tables {
		margin-left: 30rpx;
		margin-top: 24rpx;
		width: 692rpx;
		background: #ffffff;
		opacity: 1;
		border-radius: 10rpx;
	}

	.typeface4 {
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #656565;
		opacity: 1;
		margin-left: 8rpx;
	}

	.cancelButtom {
		text-align: center;
		background: #fca800;
		border-radius: 10rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 400;
		line-height: 42rpx;
		color: #ffffff;
		opacity: 1;
		padding: 4rpx 12rpx;
	}

	.typeface5 {
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #656565;
		opacity: 1;
	}

	.typeface6 {
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #f86565;
		opacity: 1;
	}

	.typeface7 {
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #f29423;
		opacity: 1;
		background-color: #FFF6EB;
		padding: 2rpx 10rpx;
		border-radius: 20rpx;
		margin-left: 14rpx;
	}

	.typeface8 {
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #3f3f3f;
		opacity: 1;
	}

	.typeface9 {
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #f29423;
		opacity: 1;
	}

	.label {
		margin-top: 12rpx;
		margin-right: 10rpx;
		// width: 106rpx;
		height: 42rpx;
		background: #F4F6F5;
		// border: 2rpx solid #f29423;
		opacity: 1;
		// border-radius: 10rpx;
		text-align: center;
		font-size: 20rpx;
		font-family: PingFang SC;
		font-weight: 400;
		line-height: 42rpx;
		color: #B0B5B8;
		opacity: 1;
		padding: 0 10rpx;
	}

	.joinButtom {
		border: 2rpx solid #f29423;
		opacity: 1;
		border-radius: 10rpx;
		text-align: center;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #f29423;
		opacity: 1;
		padding: 4rpx 12rpx;
	}

	.typeface10 {
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #858585;
		opacity: 1;
	}

	.typeface11 {
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #fca800;
		opacity: 1;
	}

	// .movableArea {
	// 	position: fixed;
	// 	top: 0;
	// 	left: 0;
	// 	width: 100%;
	// 	height: 100%;
	// 	pointer-events: none; //设置area元素不可点击，则事件便会下移至页面下层元素

	// 	.movableView {
	// 		pointer-events: auto; //可以点击
	// 		text-align: center;
	// 		width: 165rpx;
	// 		margin-right: 15rpx;

	// 		image {
	// 			width: 164rpx;
	// 			height: 164rpx;
	// 			position: relative;
	// 		}

	// 		text {
	// 			text-align: center;
	// 			font-size: 22rpx;
	// 			font-family: PingFang SC;
	// 			// font-weight: bold;
	// 			color: #ffffff;
	// 			opacity: 1;
	// 			position: absolute;
	// 			top:30rpx;
	// 			right: 30rpx;
	// 			padding: 0 9rpx;
	// 			border-radius: 50%;
	// 			background-color: #FA5151;
	// 		}
	// 	}
	// }
</style>
